<template>
  <div class="order-list">
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table">
      <div slot="filter">
        <el-form inline size="mini">
          <el-form-item label="后台单号">
            <el-input v-model="noWatchParams.xmbzNo" placeholder="后台单号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <template slot="column-expand" slot-scope="{data}">
        <el-table-column type="expand">
          <template slot-scope="props">
            <detail :order="props.row"></detail>
          </template>
        </el-table-column>
      </template>

      <template slot="column-operate" slot-scope="{data}">
        <!-- <el-button size="mini" @click="handleViewLog(data)" class="ml-0 mt-5">
          日志
        </el-button> -->
        <el-button size="mini" type="primary" @click="handleViewOrder(data)" class="ml-0 mt-5">
          去熊猫系统查看
        </el-button>
      </template>
    </XmTable>

    <orderLogDialog ref="orderLogDialog"></orderLogDialog>
  </div>
</template>

<script>
import { tableConfig } from './config'
import orderLogDialog from '@/components/dialog/orderLogDialog';
import detail from './detail.vue';

export default {
  components: {
    orderLogDialog,
    detail
  },
  data() {
    const { sessionid, bookerPhone, qiyuCustomer } = this.$route.query;
    let qiyuParams = null;
    if (qiyuCustomer) {
      qiyuParams = JSON.parse(decodeURIComponent(qiyuCustomer))
    }
    return {
      tableConfig,
      noWatchParams: {
        sessionid,
        bookerPhone: bookerPhone || (qiyuParams && qiyuParams.phone),
        xmbzNo: qiyuParams && qiyuParams.xmbzNo
      }
    };
  },
  methods: {
    handleSearch() {
      this.$refs.table.fetch()
    },
    handleViewLog(data) {
      this.$refs.orderLogDialog.show({ orderId: data.id })
    },
    handleViewOrder(data) {
      const url =`/#/viewOrdInfor/index?id=${data.id}`
      window.open(url, `xmbz_view_order_${data.id}`)
    },
  },
};
</script>
<style lang="scss" scoped>
.order-list {
  min-width: 600px;
  padding: 10px;
  .table {
    width: 100%;
  }
}
</style>